<!--
 * @Description: 老虎机 https://qweaa.github.io/lattice-lottery-new/slot-machine/
 * @Version: 0.0.1
 * @Autor: zhj1214
 * @Date: 2024-07-16 09:39:19
 * @LastEditors: zhj1214
 * @LastEditTime: 2024-07-31 15:05:25
-->

<template>
  <div class="rollingNumbers items-center" ref="rollingNumbersboxRef">
    <div id="SlotMachine"></div>
  </div>
</template>
<script setup name="rollingNumbers" lang="ts">
import SlotMachine from "./index";

const props = withDefaults(
  defineProps<{
    grade?: string; // 分数
  }>(),
  {
    grade: "0000",
  }
);

const emit = defineEmits(["confirm"]);

// 中奖结果数组: 字符串转数组
const resultsArr = Array.from(props.grade || "");

// 奖品
const list = [
  {
    label: "1",
  },
  {
    label: "2",
  },
  {
    label: "3",
  },
  {
    label: "4",
  },
  {
    label: "5",
  },
  {
    label: "6",
  },
  {
    label: "7",
  },
  {
    label: "8",
  },
  {
    label: "9",
  },
  {
    label: "a",
  },
  {
    label: "b",
  },
  {
    label: "c",
  },
  {
    label: "d",
  },
  {
    label: "e",
  },
  {
    label: "f",
  },
  {
    label: "0",
  },
];

// 父容器
const rollingNumbersboxRef = ref();
const boxWidth = ref(0);
//
let oSlotMachine: any = null;
onMounted(() => {
  if (rollingNumbersboxRef.value) {
    boxWidth.value = rollingNumbersboxRef.value.offsetWidth;
    // console.log(boxWidth.value, "--boxWidth.value--", props.grade);
  }
  oSlotMachine = new SlotMachine({
    element: "#SlotMachine",
    colCount: resultsArr.length, // 四列
    oneColTime: 1,
    moveTime: 0.35, //  每一列动画时长
    concatCount: 2, // 奖品列表复制次数
    delayTime: 100,
    list,
  });
  setTimeout(() => {
    play();
  }, 200);
});

const play = () => {
  if (oSlotMachine && resultsArr.length > 0) {
    let results: any = [];
    resultsArr.forEach((e, index) => {
      const idx = list.findIndex((item) => {
        return item.label == e;
      });
      results.push(idx);
    });

    oSlotMachine.go(results);
  }
};
</script>
<style lang="scss" scoped>
.rollingNumbers {
  justify-content: center;
  font-size: 40 * 2px;
  color: #007bff;
  font-weight: 900;
}
</style>
